<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__ADMIN__/css/font.css">
    <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
    <script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/echarts.min.js"></script>
    <style type="text/css">
        body{position: relative;}
        #chart1{width: 45%;height: 45%;position: absolute;left: 0;top:8%;}
        #chart2{width: 45%;height: 45%;position: absolute;left: 50%;top:8%;}
        #form{width: 100%;height: 8%;position: absolute;top:0;}
        #table1{width: 100%;position: absolute;left: 0;top:47%;overflow: auto;padding: 20px;}
        .layui-table td{font-size: 16px !important;}
        .layui-table th{font-size: 16px !important;font-weight: 800}
        #table2{width: 50%;height: 100%;position: absolute;right: 0;top:98%;overflow: auto;}
        .layui-form-select dl{z-index: 9999 !important}
    </style>
</head>
<body>
<div id="form">
    <form class="layui-form layui-form-pane" action="" style="text-align: center;">
        <div class="layui-form-item" style="margin-top:5px;">

            {include file="public/quick_date" /}

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="manager_id" id="manager_id">
                        <option value="">全部小组</option>
                        {foreach name="managers" id="value"}
                        <option value="{$value.id}">{$value.name}的小组</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="order_type" id="order_type">
                        <option value="">排序方式</option>
                        <option value="lr_count">录入数</option>
                        <option value="ba_count">保A数</option>
                        <option value="qd_count">签单数</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2">查询</button>
            </div>
        </div>
    </form>
</div>
<div id="chart1"></div>
<div id="chart2"></div>

<div id="table1" style="margin: 20px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>{$start_date}至{$end_date}全部小组客户数据</legend>
    </fieldset>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>小组</th>
            <th>录入客户数</th>
            <th>保A数</th>
            <th>签单数</th>
            <th>当前洽淡数</th>
        </tr>
        </thead>
        <tbody>
        {foreach name="data" id="value"}
        <tr>
            <td>{$value.group_name}</td>
            <td>{$value.lr_count}</td>
            <td>{$value.ba_count}</td>
            <td>{$value.qd_count}</td>
            <td>{$value.qt_count}</td>
        </tr>
        {/foreach}
        </tbody>
    </table>
</div>
<!-- <div id="table2">
    

</div> -->

<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate','table','jquery'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,table = layui.table
                ,$ = layui.jquery;

        laydate.render({
            elem: '#start_date'
        });
        laydate.render({
            elem: '#end_date'
        });

        $('#order_type').val('{$order_type}');
        form.render();
        $('#manager_id').val('{$manager_id}');
        form.render();
    });
</script>


<script type="text/javascript">

    var option1 = {
        title:{
            text:'小组签单保A'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            // max: function(value){
            //     return value.max * 1.2
            // },
            type: 'value',
            // nameTextStyle:{
            //     fontFamily:'微软雅黑',
            //     fontWeight:900,
            //     fontSize:16
            // }
        },
        xAxis: {
            type: 'category',
            data: [{foreach name="chartData" id="value"}"{$value.group_name}",{/foreach}]
    },
    series: [
        {
            name: '保A数',
            type: 'bar',
            color: '#FF8C00',
            barMaxWidth : 35,
            label: {
                show: true
            },
            data: [{foreach name="chartData" id="value"}"{$value.ba_count}",{/foreach}]
    },
    {
        name: '签单数',
                type: 'bar',
            color: '#ff2020',
            barMaxWidth : 35,
            label: {
        show: true
    },
        data: [{foreach name="chartData" id="value"}"{$value.qd_count}",{/foreach}]
    }
    ]
    };
    var option2 = {
        title:{
            text:'小组录入数量'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: [{foreach name="chartData" id="value"}"{$value.group_name}",{/foreach}]
    },
    series: [
        {
            name: '录入数',
            type: 'bar',
            color: '#202080',
            stack: 'total',
            barMaxWidth : 35,
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: [{foreach name="chartData" id="value"}"{$value.lr_count}",{/foreach}]
    }

    ]
    };

    var chart1 = echarts.init(document.getElementById('chart1'));
    var chart2 = echarts.init(document.getElementById('chart2'));
    chart1.setOption(option1);
    chart2.setOption(option2);
    /*
     ajaxget();
     function ajaxget(){
     $.get('{:url('stats/staffData')}',function(data){
     option1.series = data.data;
     option1.xAxis = data.staff;
     console.log(data);
     chart1.setOption(option1);
     },'json');
     }
     */
    /*
     $(window).resize(function(){
     $('#chart1').resize();
     });
     */

    $(function(){

    })


</script>

</body>
</html>